<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>原始拼接数据：{{ fistName }} {{ lastName }}</p>
    <p>计算后数据：{{ name }}</p>
    <button @click="name='wang wu'">修改name</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import {computed, ref} from "vue";

const fistName = ref('li')
const lastName = ref('si')

// 计算函数(可读可写)
// const name = computed({
//   get(){
//     return fistName.value+''+lastName.value
//   },
//   set(newVal:string){
//     // 字符串切割 并结构赋值
//     [fistName.value,lastName.value]=newVal.split(' ')
//   }
// })

// 计算函数(只读)
const name = computed(() => {  // 此函数默认为 get
      return fistName.value + ' ' + lastName.value
    }
)
</script>